<template>
  <div class="billingWrapper">
    <div class="billingHeader">
      <yd-navbar title="开单">
        <router-link to="/" slot="left">
          <yd-navbar-back-icon></yd-navbar-back-icon>
        </router-link>
        <div @click="scanVip" slot="right" style="color:#ff5355;display:flex;align-items:center;">
          <img src="~img/icon_kaidan_huiyuan.png" alt="" height="18" style="margin-right: 6px;">
          选择会员
        </div>
      </yd-navbar>
      <div class="searchWrapper">
        <img src="~img/icon_kaidan_sousuo.png" alt="">
        <input type="text" placeholder="请输入商品名称/条码/商家货号">
        <img src="~img/icon_kaidan_saoyisao.png" alt="" @touchstart="scanGoods">
      </div>
    </div>
    <div class="billingScrollWrapper">
      <div class="billingScrollOpen">
        <div class="openList-left">
          <!-- active 激活状态 -->
          <Scroll :data="classifyList" :refreshDelay="refreshDelay" ref="classifyContent">
            <transition-group
              ref="list"
              name="list"
              tag="ul"
              class="billingScrollOpen-left"
              enter-active-class="animated fadeInUp"
              leave-active-class="animated fadeOutDown"
            >
              <li
                class="billingScrollOpen-leftItem"
                :key="index"
                :class="[index == activeIndex ? 'active' : '']"
                :Index="index"
                @click="getRangeType(index)"
                v-for="(item,index) in classifyList"
              >
                <span class="billingScrollOpen-title">{{item.name}}</span>
                <div class="activeBlank"></div>
              </li>
            </transition-group>
          </Scroll>
        </div>
        <div class="openList-right">
          <Ball ref="ball"></Ball>
          <Scroll :data="foodList" :refreshDelay="refreshDelay">
            <!-- <animate-loading :loadingState="loadingState"></animate-loading> -->
            <div class="goodsListTabs">
              <transition-group name="listInfo">
                <div class="goodsItems" v-for="(foodItem,index) in foodList" :key="index">
                  <div class="goodsItemsInfo">
                    <div
                      class="goodsInfoImg"
                      :style="{backgroundImage: foodItem.ImageSmallUrl ? `url(${foodItem.ImageSmallUrl})`:`url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542708757159&di=a2bc453924dc3435aa328ebe48bb7f19&imgtype=0&src=http%3A%2F%2Fpic1.nipic.com%2F2009-01-03%2F20091394335683_2.jpg)`}"
                    ></div>
                    <div class="goodsInfoDetail">
                      <span>{{foodItem.Title}}</span>
                      <div class="goodsPrice">
                        <em>¥</em>
                        {{foodItem.SysPrice}}/{{foodItem.Unit}}
                      </div>
                    </div>
                    <!-- 加减组件 -->
                    <Cartcontrol :food="foodItem"></Cartcontrol>
                  </div>
                </div>
              </transition-group>
            </div>
          </Scroll>
        </div>
      </div>
    </div>
    <div class="billingFooterWrapper">
      <Shop-cart :shopGood="shopGood" :selectGoods="selectGoods" :selectNumbers="selectNumbers" :selectSum="selectSum"></Shop-cart>
    </div>
  </div>
</template>

<script>
import {
  Confirm,
  Alert,
  Toast,
  Notify,
  Loading
} from "vue-ydui/dist/lib.rem/dialog";
import Scroll from "@/components/common/scroll";
import animateLoading from "@/components/common/loading";
import Ball from "@/components/common/ball";
import Cartcontrol from "@/components/common/cartcontrol";
import ShopCart from "@/components/common/shopCart";
export default {
  data() {
    return {
      footerState: false,
      Y: 0,
      activeIndex: 0,
      classifyList: [],
      refreshDelay: 120,
      loadingState: true,
      foodList: [],
      shopGood: {
        foodItem: {
          name: "手机",
          id: "12545",
          count: "1"
        }
      }
    };
  },
  components: { Scroll, animateLoading, Ball, Cartcontrol, ShopCart },
  methods: {
    getRangeType(val) {
      val++;
      let el = event.currentTarget;
      let activeIndex = el.getAttribute("Index");
      this.activeIndex = activeIndex;
      var scrollMain = this.$refs.classifyContent;
      scrollMain.scrollToElement(
        document.querySelector(
          ".billingScrollOpen-left li:nth-child(" + val + ")"
        ),
        null,
        false,
        true
      );
      scrollMain.refresh();
    },
    scanGoods() {
      cordova.plugins.barcodeScanner.scan(
        function(result) {
          alert(
            "We got a barcode\n" +
              "Result: " +
              result.text +
              "\n" +
              "Format: " +
              result.format +
              "\n" +
              "Cancelled: " +
              result.cancelled
          );
        },
        function(error) {
          alert("Scanning failed: " + error);
        }
      );
    },
    scanVip() {
      // alert(0);
      cordova.plugins.barcodeScanner.encode(
        cordova.plugins.barcodeScanner.Encode.TEXT_TYPE,
        "http://www.nytimes.com",
        function(success) {
          alert("encode success: " + success);
        },
        function(fail) {
          alert("encoding failed: " + fail);
        }
      );
    },
    getData() {
      Loading.open("加载中...");
      this.axios.get("/api/data").then(response => {
        Loading.close();
        if (response.data) {
          this.classifyList = response.data; //获取分类
          this.axios.get("/api/goodsList").then(response => {
            if (response.data) {
              this.foodList = response.data.data.Datas; //获取数据
            }
          });
        }
      });
    }
  },
  mounted() {
    this.getData();
  },
  computed: {
    selectGoods() {
      let goods = [];
      this.foodList.forEach(i => {
        if (i.count) {
          goods.push(i);
        }
      });
      return goods;
    },
    selectNumbers() {
      let number = 0;
      this.foodList.forEach(i => {
        if (i.count) {
          number += i.count;
        }
      });
      return number;
    },
    selectSum(){
      let sum = 0;//总数
      this.foodList.forEach(i => {
        if (i.count) {
          sum += (i.count * i.SysPrice)          
        }
      });
      return sum;
    }
  }
};
</script>
<style lang="scss">
@import "../../../static/css/animate.css";
.billingWrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0 auto;
  max-width: 750px;
  min-width: 300px;
  .billingScrollWrapper {
    width: 100%;
    height: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    .billingScrollOpen {
      display: flex;
      width: 100%;
      height: 100%;
      overflow: hidden;
      .openList-left {
        position: relative;
        width: 1.8rem;
        height: 100%;
        overflow: hidden;
        background-color: #f6f7fc;
        .billingScrollOpen-left {
          width: 100%;
          -webkit-overflow-scrolling: touch;
          background-color: #f6f7fc;
          transition: all 1s linear;
          .billingScrollOpen-leftItem {
            position: relative;
            line-height: 0.97rem;
            text-align: center;
            height: 0.97rem;
            .billingScrollOpen-title {
              display: block;
              width: 80%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 0.26rem;
              color: #999999;
              margin: 0 auto;
            }
            .activeBlank {
              position: absolute;
              height: 2px;
              width: 100%;
            }
          }
          .billingScrollOpen-leftItem.active {
            background-color: #fff;
            .billingScrollOpen-title {
              color: #ff5355;
            }
            .activeBlank {
              background-color: #ff5355;
            }
          }
        }
      }
      .openList-right {
        position: relative;
        width: 5.7rem;
        height: 100%;
        overflow-y: scroll;
        background-color: #ffffff;
      }
    }
  }
}
.searchWrapper {
  display: flex;
  align-items: center;
  height: 0.8rem;
  background-color: #ffffff;
  padding: 0 0.2rem;
  justify-content: space-between;
  img {
    width: 0.36rem;
  }
  input {
    width: 5.65rem;
    height: 100%;
    text-align: left;
  }
}
.billingFooterWrapper {
  height: 1rem;
}
.goodsListTabs {
  width: 100%;
  display: flex;
  flex-direction: column;
  .goodsItems {
    background-color: #f6f7fc;
    // h1 {
    //   padding: 0 0.3rem;
    //   color: #999999;
    //   font-size: 12px;
    //   height: 0.5rem;
    //   line-height: 0.5rem;
    // }
    .goodsItemsInfo {
      position: relative;
      padding: 0 0.3rem;
      display: flex;
      height: 1.8rem;
      background-color: #fff;
      align-items: center;
      box-shadow: 0 -1px 0 #f0f0f0 inset;
      .goodsInfoImg {
        width: 1.3rem;
        height: 1.3rem;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .goodsInfoDetail {
        flex: 1;
        display: flex;
        width: 100%;
        height: 1.3rem;
        margin-left: 0.25rem;
        flex-direction: column;
        justify-content: space-between;
        span {
          font-size: 0.26rem;
          color: #333333;
        }
        .goodsPrice {
          font-size: 0.24rem;
          color: #999999;
        }
        em {
          font-size: 12px;
        }
      }
    }
  }
}
.goods-control {
  position: absolute;
  width: 1.4rem;
  height: 0.4rem;
  right: 0.3rem;
  bottom: 0.25rem;
  .control-plus {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    left: 0;
    top: 0;
    background: url(~img/icon_kaidan_reduce.png) 0 0 no-repeat;
    background-size: 100% 100%;
  }
  .control-count {
    text-align: center;
    position: absolute;
    left: 0.4rem;
    top: 0;
    width: 0.58rem;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.36rem;
    color: #333333;
  }
  .control-add {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    right: 0;
    top: 0;
    background: url(~img/icon_kaidan_add.png) 0 0 no-repeat;
    background-size: 100% 100%;
  }
}
</style>





